<template>
  <div class="search-results-page">
    <!--头部-->
    <div class="search-header">
        <!--返回按钮-->
        <div class="back-button" @click="goBack">
            <svg t="1751614585251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
                p-id="1471" width="20" height="20">
                <path d="M790.865959 73.216062 322.123178 512.062492l468.74278 438.746442c16.397998 16.697962 16.397998 43.894642 0 60.592603-16.397998 16.697962-42.894764 16.697962-59.292762 0l-498.839107-466.943c-8.698938-8.898914-12.398487-20.797461-11.898548-32.496033-0.599927-11.698572 3.099622-23.497132 11.898548-32.496033l498.839107-466.943c16.397998-16.697962 42.894764-16.697962 59.292762 0C807.263957 29.421409 807.263957 56.518101 790.865959 73.216062z" 
                    fill="#272636" 
                    p-id="1472">
                </path>
            </svg>
        </div>

      <!--输入框-->
      <div class="search-input-container" @click="goToSearch">
        <input 
          type="text" 
          class="search-input" 
          placeholder="搜索你感兴趣的内容..."
          :value="searchQuery"
          readonly
        >
      </div>
    </div>

    <!--搜索结果主体-->
    <div class="search-results-content">
      <div v-show="searchResultNumber != null">
        <div class="result-stats" v-if="searchResultNumber > 0">
          找到{{ searchResultNumber > 100 ? '多' : searchResultNumber }}条相关结果
        </div>
        <div class="no-results" v-else>
          未找到与 "{{ searchQuery }}" 相关的内容
        </div>
      </div>
      
      <!-- 搜索结果列表 -->
      <PostList ref="vanPullRefreshRef" 
                v-model:title="searchQuery"
                @getResultNumber="handleGetResultNumber">
      </PostList>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import PostList from '@/components/PostList.vue'

const route = useRoute()
const router = useRouter()

const searchQuery = ref('')
const searchResultNumber = ref(null)

// 组件通信
const handleGetResultNumber = (data)=>{
  searchResultNumber.value = data
}


// 返回上一页
const goBack = () => {
  router.replace({
    path: '/Search',
    query: { q: searchQuery.value, from: 'results' }
  })
}

// 跳转到搜索页面
const goToSearch = () => {
  router.replace({
    path: '/Search',
    query: { q: searchQuery.value, from: 'results' }
  })
}


onMounted(() => {
  // 从路由参数获取搜索词
  searchQuery.value = Array.isArray(route.query.q) ? route.query.q[0] : route.query.q;
})
</script>


<style lang="scss" scoped>
.search-results-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.search-header {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
}

.back-button {
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
  display: flex;
  align-items: center
}

.search-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 0 15px;
  height: 40px;
}

.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
}

.search-results-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
}
.search-results-content::-webkit-scrollbar{
  display: none;
}

.result-stats {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.no-results {
  text-align: center;
  padding: 30px 0;
  color: #999;
}

</style>